<!DOCTYPE html>
<head>
    <title>Auto adjusting sliding panels</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
    <link rel="Stylesheet" type="text/css" href="css/fluidic.css" />        
</head>
<body>
        <div id="wrapper">
            <div id="innerWrapper">
                <div class="panels" id="panel1">
                    <div class="pageHeader">
                        <p>Lorem Ipsum</p>
                    </div>
                    <div class="content">
                        <p>Lorem Ipsum is simply dummy text of the printing
                            and typesetting industry. Lorem Ipsum has been
                            the industry's standard dummy text ever since
                            the 1500s, when an unknown printer took a galley
                            of type and scrambled it to make a type specimen
                            book. It has survived not only five centuries, but
                            also the leap into electronic typesetting, remaining
                            essentially unchanged. It was popularised in the 1960s
                            with the release of Letraset sheets containing Lorem
                            Ipsum passages, and more recently with desktop publishing
                            software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                    </div>
                    <div class="buttonHolder">
                        <input type="button" value="Slide In" onclick="slideIn()"/>
                    </div>
                </div>
                <div class="panels" id="panel2">
                    <div class="pageHeader">
                        <p>This is second panel</p>                    
                    </div>
                    <div class="content">
                        <p>Lorem Ipsum is simply dummy text of the printing
                            and typesetting industry. Lorem Ipsum has been
                            the industry's standard dummy text ever since
                            the 1500s, when an unknown printer took a galley
                            of type and scrambled it to make a type specimen
                            book.</p>
                    </div>
                    <nav>
                        <dl>
                            <dd onclick="navigateTo(event)">
                                Menu Item1
                            </dd> 
                            <dd onclick="navigateTo(event)">
                                Menu Item2
                            </dd>                                
                            <dd onclick="navigateTo(event)">
                                Menu Item3
                            </dd>
                            <dd onclick="navigateTo(event)">
                                Menu Item4
                            </dd>                            
                        </dl>
                    </nav>
                    <div class="buttonHolder">
                        <input type="button" value="Slide Out" onclick="slideOut()"/>
                    </div>
                </div>
            </div>
        </div> 
        <script type="text/javascript" src="js/fluidic.js"></script>           
</body>
</html>
